/* =========================
   Utility Classes
   ========================= */

.rounded-gif {
  border-radius: 0.625rem; /* 10px */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-shadow: 0.25rem 0.25rem 0.625rem rgba(0, 0, 0, 0.2); 
}

.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
} 

/* =========================
   Custom Breadcrumb Styling
   ========================= */
.breadcrumbs {
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  --ifm-breadcrumb-separator: '/';
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  color: var(--ifm-color-emphasis-600);
  
  &:not(:last-child)::after {
    content: '/';
    color: var(--ifm-color-emphasis-400);

    color: #000;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
  }
}

.breadcrumbs__link {
  color: var(--ifm-color-emphasis-700);
  text-decoration: none;
  padding: 0.125rem 0rem;

  &:hover {
    color: var(--ifm-color-primary);
    background-color: transparent !important;
    text-decoration: none;
  }
}

.breadcrumbs__item--active {
  background-color: transparent;
}

.breadcrumbs__item--active .breadcrumbs__link {
  color: var(--ifm-color-emphasis-800);
  cursor: default;
  font-weight: bold;
}

/* Dark mode specific fixes */
[data-theme='dark'] .breadcrumbs__item--active .breadcrumbs__link {
  background-color: transparent !important;
  
  &:hover {
    background-color: transparent !important;
  }
} 